<script setup lang="ts">
const canvas = shallowRef<HTMLCanvasElement>()
const ctx = shallowRef<CanvasRenderingContext2D>()

function initEditor() {
  canvas.value = document.getElementById('lb-editor') as HTMLCanvasElement
  ctx.value = canvas.value.getContext('2d')!

  // ctx.value.fillRect(10, 10, 50, 50)
  // ctx.value.strokeRect(50, 50, 30, 30)
  // ctx.value.clearRect(20, 20, 20, 20)

  // ctx.value.beginPath()
  // ctx.value.moveTo(75, 50)
  // ctx.value.lineTo(100, 75)
  // ctx.value.lineTo(100, 25)
  // ctx.value.closePath()
  // ctx.value.stroke()
  // ctx.value.fill()

  // ctx.value.beginPath()
  // ctx.value.moveTo(25, 25)
  // ctx.value.lineTo(105, 25)
  // ctx.value.lineTo(25, 105)
  // ctx.value.stroke()
  // ctx.value.fill()

  // ctx.value.beginPath()
  // ctx.value.moveTo(125, 125)
  // ctx.value.lineTo(125, 45)
  // ctx.value.lineTo(45, 125)
  // ctx.value.closePath()
  // ctx.value.stroke()

  // ctx.value.beginPath()
  // ctx.value.arc(100, 100, 20, 0, Math.PI * 2, true)
  // ctx.value.closePath()
  // ctx.value.stroke()

  // ctx.value.beginPath()
  // ctx.value.moveTo(75, 25)
  // ctx.value.quadraticCurveTo(25, 25, 25, 62.5)
  // ctx.value.quadraticCurveTo(25, 100, 50, 100)
  // ctx.value.quadraticCurveTo(50, 120, 30, 125)
  // ctx.value.quadraticCurveTo(60, 120, 65, 100)
  // ctx.value.quadraticCurveTo(125, 100, 125, 62.5)
  // ctx.value.quadraticCurveTo(125, 25, 75, 25)
  // ctx.value.stroke()

  // ctx.value.beginPath()
  // ctx.value.moveTo(75, 40)
  // ctx.value.bezierCurveTo(75, 37, 70, 25, 50, 25)
  // ctx.value.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5)
  // ctx.value.bezierCurveTo(20, 80, 40, 102, 75, 120)
  // ctx.value.bezierCurveTo(110, 102, 130, 80, 130, 62.5)
  // ctx.value.bezierCurveTo(130, 62.5, 130, 25, 100, 25)
  // ctx.value.bezierCurveTo(85, 25, 75, 37, 75, 40)
  // ctx.value.fill()

  // const rectangle = new Path2D()
  // rectangle.rect(10, 10, 50, 50)

  // const circle = new Path2D()
  // circle.moveTo(125, 35)
  // circle.arc(100, 35, 25, 0, 2 * Math.PI)

  // ctx.value.stroke(rectangle)
  // ctx.value.fill(circle)
}

onMounted(() => {
  initEditor()
})
</script>

<template>
  <div class="h-full flex justify-center items-center">
    <canvas
      id="lb-editor"
      class="lb-editor"
      width="500"
      height="500"
    />
  </div>
</template>

<style lang="less" scoped>
.lb-editor {
  border: 1px solid var(--el-color-primary);
}
</style>
